<template>
    <div class="login">
        <div class="login-box">
            <div class="login-form">
                <el-button v-for="button in buttons" :key="button.text" :type="button.type" text>{{ button.text }}
                </el-button>
            </div>
            <div class="form">
                <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm">
                    <el-form-item prop="username">
                        <el-input v-model="ruleForm.username" type="username" autocomplete="off" placeholder="请输入手机号" />
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="ruleForm.password" type="password" autocomplete="off" placeholder="请输入密码" />
                    </el-form-item>
                </el-form>
            </div>
            <div class="remPsw">
                <el-checkbox label="记住密码" name="type" />
                <div>
                    <a href="/list">账号申诉</a>
                    &nbsp;
                    <span>|</span>
                    &nbsp;
                    <a href="/list">忘记密码</a>
                </div>
            </div>
            <div class="form-login">
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
                </el-form-item>
            </div>
        </div>
    </div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { loginApi } from '../../api/login'
import { useUserStore } from '@/store/modules/userModules.js'
import { storeToRefs } from 'pinia';
const ruleFormRef = ref()
// 创建 userStore 仓库
const userStore = useUserStore()
// 解构 userStore 中的userInfo 方法 storeToRefs变成响应式
const { token } = storeToRefs(userStore)
// 解构 actions 方法
const { setToken } = useUserStore()
import { useRouter } from 'vue-router'
const router = useRouter()
const buttons = [
    { type: '', text: '登录' },
    { type: '', text: '注册' }
]
// 验证手机号
const validateUsername = (rule, value, callback) => {
    // 手机号格式判断
    if (/^[a-zA-Z]+$/.test(value)) {
        callback()
    } else {
        ElMessage({
            showClose: true,
            message: '请输入手机号',
            type: 'error'
        })
    }

}
// 验证密码
const validatePassword = (rule, value, callback) => {
    // 密码验证:只包含数字
    if (/^[a-zA-Z]+$/.test(value)) {
        callback()
    } else {
        ElMessage({
            showClose: true,
            message: '请输入密码',
            type: 'error'
        })
    }
}
const ruleForm = reactive({
    username: 'admin',
    password: 'admin',
})
const rules = reactive({
    username: [{ validator: validateUsername, trigger: 'blur' }],
    password: [{ validator: validatePassword, trigger: 'blur' }],
})
// 登录
const submitForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            // 调用登录接口
            loginApi(ruleForm).then(res => {
                console.log('res', res);
                // console.log(res.data.msg);
                // 成功之后将 token 传入到 pinia
                if (res.data.msg === 'ok') {
                    setToken(res.data.data.token)
                    // 登录成功之后 跳转到 首页
                    // console.log(res.data.data.token);
                    router.push('/')
                }
                // console.log(userStore);

            })
        } else {
            console.log('error submit!')
            return false
        }
    })
}
</script>
<style scoped lang="scss">
.login {
    width: 100%;
    height: 100%;
    //   display: flex;
    //   justify-content:center;
    //   align-items:center;
    background-image: url('../../assets/imgs/cat.png');
    background-size: 100% 100%;
    overflow: hidden;
    position: relative;
}

.login-form {
    display: flex;
    justify-content: space-between;
    width: 100%;

    .el-button {
        width: 50%;
        text-align: center;
        font-size: 14px;
        padding: 10px 0px 16px;
        background-color: #fff;
    }
}

.login-box {
    width: 100%;
    max-width: 300px;
    padding: 1rem 1.2rem;
    border-radius: 0.4rem;
    position: absolute;
    z-index: 1;
    right: 200px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff;

}

.form {
    margin-top: 15px;
    // border-radius: 10px;
}

.el-input__wrapper {
    border-radius: 10px;
}

.remPsw {
    display: flex;
    justify-content: space-between;
    align-items: center;

    a {
        font-size: 14px;
        color: #409EFF;
        text-decoration: none;
    }
}

.form-login {
    padding-top: 10px;

    .el-button.el-button--primary {
        width: 100%;
        height: 40px;
        border-radius: 20px;
        color: #000;
        background-color: #FFDD03;
    }
}
</style>